<ng-container *ngTemplateOutlet="itemTemplate; context: {array: menus, root: true}"></ng-container>
    <ng-template #itemTemplate let-array="array" let-root="root">
        <ng-container *ngFor="let item of array">
            <li *ngIf="item.children && !item.hide" 
                nz-submenu 
                [nzOpen]="item.selected" 
                (nzOpenChange)="nzOpenChange(item, array)"
                [permission-hidden]="item.permission">
                
                <span *ngIf="root" title>
                    <i class="{{item.icon}}"></i>
                    <span class="nav-text">{{item.translate | locale}}</span>
                </span>

                <span *ngIf="!root" title [style.padding-left.px]="0">
                    <span>{{item.translate | locale}}</span>
                </span>
                <ng-container *ngIf="item.children">
                    <ul>
                        <ng-container *ngTemplateOutlet="itemTemplate; context: {array: item.children, root: false}"></ng-container>
                    </ul>
                </ng-container>
               
            </li>
            
            <li *ngIf="!item.children && !item.hide" 
            nz-menu-item 
            [routerLink]="item.link" 
            [nzSelected]="item.selected"
            [permission-hidden]="item.permission">
            <span *ngIf="root" title [style.padding-left.px]="0">
                {{child.translate | locale}}
             </span>
             <span *ngIf="!root" title>
                {{item.translate | locale}}
             </span>
        </li>
        </ng-container>
    </ng-template>